<html>
<head>
<meta charset="UTF-8" />
<title>每日表现</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<!--表单 start-->
<style>
.window{width:200px; border:1px solid transparent; padding:10px; position:fixed; z-index:99; background:#eee; border-radius:10px;}
.window .item{margin-bottom:10px;}
.window select{width:100px;}
.window input[type='submit']{width:80px;}
</style>
<div class="window">
    <form method="POST" action="save">
        <div class="item">
            <span>日期：</span>
            <select name="date">
                @foreach($recent_date as $date=>$md)
                <option value="{{$date}}" @if($md==$today) selected @endif>{{$md}}</option>
                @endforeach
            </select>
        </div>
        <div class="item">
            <span>控制：</span>
            <select name="reason">
                <option value="0">请选择</option>
                <option value="1">极好</option>
                <option value="2">良好</option>
                <option value="3">一般</option>
                <option value="4">较差</option>
                <option value="5">极差</option>
            </select>
        </div>
        <div class="item">
            <span>状态：</span>
            <select name="result">
                <option value="0">请选择</option>
                <option value="1">极好</option>
                <option value="2">良好</option>
                <option value="3">一般</option>
                <option value="4">较差</option>
                <option value="5">极差</option>
            </select>
        </div>
        <div class="item">
            <input type="submit" name="submit" value="提交">
        </div>
    </form>
</div>
<!--表单 end-->
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
@if($json_data)
var json_data = {!!$json_data!!};
@else
var json_data = [[],[],[]];
@endif
$(document).ready(function() {   
   var title = {
      text: '每日表现'   
   };
   var subtitle = {
      text: 'Source: runoob.com'
   };
   var xAxis = {
      categories: json_data[0]
   };
   var yAxis = {
      title: {
         text: 'Daily Log'
      }
   };
   var plotOptions = {
      line: {
         dataLabels: {
            enabled: true
         },   
         enableMouseTracking: false
      }
   };
   var series= [{
         name: 'Reason',
         data: json_data[1]
      }, {
         name: 'Result',
         data: json_data[2]
      }
   ];
   
   var json = {};

   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);
  
});
</script>
</body>
</html>